html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 100vw  100vh: 是相对于视口的宽高 ，不受父元素的影响 ， */
/* height: 100%;：相对于父元素的宽高， 元素会占据父元素的百分比  */

/* html {
    font-size:62.5%;
} */
.bg {
  background: url(../img/bg1.png) no-repeat center;
  background-size: cover;
  /* 会使图片按比例缩放并裁剪，填充整个区域， */
}
.content {
  width: 100%;
  height: 100%;
  color: #d3d3d3;
}
.main {
  display: flex;
  gap: 20px;
}
/* 头部  */
.header {
  width: 100%;
  margin-bottom: 5px;
}
.header-box {
  width: 100%;
  height: 100px;
  font-size: 30px;
  text-align: center;
  letter-spacing: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
